<%
// 判断一个项目是否包含指定路径
function isPathInItem(item, path) {
    // 直接匹配
    if (item.href === path) return true;

    // 检查子项
    if (item.items) {
        return item.items.some(subItem => isPathInItem(subItem, path));
    }

    return false;
}

// 修改后的查找逻辑
sidebar = siteData.nav.find(item => {
    // 判断当前项或其子项是否包含目标路径
    return isPathInItem(item, pageData.noLocalePath);
});
%>

<% function isActive(item) {
    // 检查当前项是否匹配
    const isSelfActive = item.href === pageData.noLocalePath;

    // 检查子项是否有匹配
    const hasActiveChild = item.items && item.items.some(child => isPathInItem(child, pageData.noLocalePath));

    return isSelfActive || hasActiveChild;
} %>

<% function renderNavItems(items, level = 0) { %>
    <ul class="<%= level === 0 ? 'space-y-1.5' : 'mt-1 mb-2 ml-2 sm:ml-3 md:ml-4 pl-2 sm:pl-3 md:pl-4 border-l border-gray-200 dark:border-gray-700 space-y-1.5' %>">
        <% items.forEach(item => { %>
            <li class="relative">
                <% if (item.items && item.items.length > 0) { %>
                <button type="button"
                        class="group block w-full text-left"
                        onclick="toggleSubmenu(this)">
                    <% } else { %>
                    <a href="<%
                        let href = '';
                        if (pageData.version) {
                            href += '/' + pageData.version;
                        }
                        if (locals.siteData.feature?.i18n?.enable && pageData.language) {
                            href += '/' + pageData.language;
                        }
                        href += item.href.startsWith('/') ? item.href : '/' + item.href;
                    %><%= href %>"
                       class="group block">
                        <% } %>
                        <div class="relative flex items-center px-2 sm:px-3 md:px-4 py-1.5 sm:py-2
                                <%= isActive(item)
                                ? 'text-blue-600 dark:text-blue-400 bg-blue-50/80 dark:bg-blue-900/20 font-medium'
                                : 'hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800/40'
                        %>
                               rounded-md transition-all duration-200 ease-in-out">

                            <% if (locals.siteData?.feature?.lucide?.enable && item.icon) { %>
                                <span class="inline-flex mr-1 sm:mr-2 text-gray-500 dark:text-gray-400 transition-colors duration-200">
                               <!-- 骨架屏 -->
                               <div class="w-3 h-3 sm:w-4 sm:h-4 animate-pulse bg-gray-200 dark:bg-gray-700 rounded"></div>

                                    <!-- 图标 -->
                               <i data-lucide="<%= item.icon %>"
                                  style="display: none;"
                                  class="w-3 h-3 sm:w-4 sm:h-4
                                       <%= isActive(item)
                                          ? 'text-blue-600 dark:text-blue-400'
                                          : 'group-hover:text-gray-900 dark:group-hover:text-gray-200'
                                  %>">
                               </i>
                           </span>
                            <% } %>

                            <span class="flex flex-grow items-center space-x-4 <%= level > 0 ? 'text-xs sm:text-sm md:text-base' : 'text-sm sm:text-base' %> whitespace-nowrap">
                                <span><%= item.title %></span>
                                <%- include('./page-status', { item: item }) %>
                            </span>

                            <% if (item.items && item.items.length > 0) { %>
                                <svg xmlns="http://www.w3.org/2000/svg"
                                     class="h-3 w-3 sm:h-4 sm:w-4 ml-1 sm:ml-2 text-gray-400 transform transition-transform duration-200 ease-in-out
                                        <%= isActive(item)
                                             ? 'rotate-90 text-blue-600 dark:text-blue-400'
                                             : 'group-hover:text-gray-600 dark:group-hover:text-gray-300' %>"
                                     viewBox="0 0 20 20"
                                     fill="currentColor">
                                    <path fill-rule="evenodd"
                                          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                                          clip-rule="evenodd"/>
                                </svg>
                            <% } %>
                        </div>
                        <% if (item.items && item.items.length > 0) { %>
                </button>
                <div class="overflow-hidden transition-all duration-200 ease-in-out
                               <%= isActive(item)
                        ? 'h-auto opacity-100'
                        : 'max-h-0 opacity-0' %>">
                    <%- renderNavItems(item.items, level + 1) %>
                </div>
                <% } else { %>
                    </a>
                <% } %>
            </li>
        <% }) %>
    </ul>
<% } %>

<% if (typeof sidebar === 'object' && sidebar !== null) { %>
    <div class="text-[0.9375rem] text-gray-600 dark:text-gray-300 overflow-y-auto max-h-[calc(100vh-4rem)] pageforge-scrollbar
                sm:max-h-screen md:h-auto lg:max-h-[calc(100vh-2rem)]">
        <div class="mb-6 overflow-x-auto min-w-0">
            <div class="min-w-fit">
                <%- renderNavItems(sidebar.items) %>
            </div>
        </div>
    </div>

    <script>
        function toggleSubmenu(button) {
            const submenu = button.nextElementSibling;
            const arrow = button.querySelector('svg');

            // 切换子菜单的类
            if (submenu.classList.contains('max-h-0')) {
                submenu.classList.remove('max-h-0', 'opacity-0');
                submenu.classList.add('max-h-96', 'opacity-100');
                arrow.classList.add('rotate-90');
            } else {
                submenu.classList.add('max-h-0', 'opacity-0');
                submenu.classList.remove('max-h-96', 'opacity-100');
                arrow.classList.remove('rotate-90');
            }
        }
    </script>
<% } %>